<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          v-hasPermi="['purchase:lqmReport:query']"
          @click="handleSearch"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['purchase:rejectRate:export']"
        >
          导出
        </el-button>
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      highlight-current-row
      border
      stripe
      v-loading="loading"
      :data="rejectRateList"
      id="tabLqmReport"
      @scrollBottom="load"
      height="calc(100% - 100px)"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" width="40" type="index" align="center" />
      <el-table-column
        label="来料日期"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwdJlrq"
      />
      <el-table-column
        label="厂商代码"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwmCsCode"
      />
      <el-table-column
        label="厂商名称"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwmCsName"
      />
      <el-table-column
        label="入库类型"
        :show-overflow-tooltip="true"
        width="100"
        align="center"
        prop="rwmType"
      >
        <template #default="scope">
          <dict-tag :options="psTypeOptions" :value="scope.row.rwmType" />
        </template>
      </el-table-column>
      <el-table-column
        label="NG笔数"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwdNGNum"
      >
        <template #default="scope">
          <a
            style="text-decoration: underline; color: red"
            @click="handleDetailClick(scope.row, 'NG')"
            >{{ scope.row.rwdNGNum }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        label="申请笔数"
        :show-overflow-tooltip="true"
        align="center"
        prop="rwdTotalNum"
      >
        <template #default="scope">
          <a
            style="text-decoration: underline; color: blue"
            @click="handleDetailClick(scope.row, 'OK')"
            >{{ scope.row.rwdTotalNum }}</a
          >
        </template>
      </el-table-column>
      <el-table-column
        label="批退率"
        :show-overflow-tooltip="true"
        align="center"
        prop="rejectRate"
      >
        <template #default="scope"
          >{{ (scope.row.rejectRate * 100).toFixed(2) }}%</template
        >
      </el-table-column>
    </el-table>

    <!-- 查询对话框   -->
    <el-dialog
      :title="title"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-col :span="24">
          <el-form-item label="月份">
            <el-date-picker
              v-model="dateRange"
              :type="'month'"
              :format="'yyyy-MM'"
              autocomplete="off"
              :clearable="false"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="厂商代码" prop="rwmCsdm">
            <el-select
              v-model="queryParams.rwmCsdm"
              style="width: 240px"
              clearable
              filterable
              placeholder="请选择厂商代码"
            >
              <el-option
                v-for="item in csOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <el-dialog
      title="详细信息"
      :height="600"
      v-model="openDetail"
      :close-on-click-modal="false"
      width="80%"
      append-to-body
    >
      <el-table
        border
        stripe
        :height="600"
        @scrollBottom="load1"
        :data="rwdDetList"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          label="#"
          type="index"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column
          label="入库单号"
          align="center"
          width="135"
          prop="rwmDjbh"
        />
        <el-table-column
          label="客户编码"
          align="center"
          width="135"
          prop="itmCustwldm"
        />
        <el-table-column
          label="入库类型"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwmType"
        >
          <template #default="scope">
            <dict-tag :options="psTypeOptions" :value="scope.row.rwmType" />
          </template>
        </el-table-column>
        <el-table-column
          label="厂商"
          :show-overflow-tooltip="true"
          width="140"
          align="center"
          prop="rwmCsdm"
        >
          <template #default="scope">
            <dict-tag :options="csOptions" :value="scope.row.rwmCsdm" />
          </template>
        </el-table-column>
        <el-table-column
          label="仓库"
          class-name="rkck"
          :show-overflow-tooltip="true"
          width="140"
          align="center"
          prop="rwmCkdm"
        >
          <template #default="scope">
            <dict-tag :options="allStorageOptions" :value="scope.row.rwmCkdm" />
          </template>
        </el-table-column>
        <el-table-column
          label="采购单号"
          :show-overflow-tooltip="true"
          width="135"
          align="center"
          prop="rwdCgdh"
        />
        <el-table-column
          label="物料代码"
          align="center"
          prop="rwdWldm"
          width="135"
        />
        <el-table-column label="品名规格" prop="itmPmgg" width="280" />
        <el-table-column
          label="单位"
          :show-overflow-tooltip="true"
          width="60"
          align="center"
          prop="itmDw"
        >
          <template #default="scope">
            <dict-tag :options="unitFlagOptions" :value="scope.row.itmDw" />
          </template>
        </el-table-column>
        <el-table-column
          label="最小包装"
          align="center"
          prop="minPackage"
          width="100"
        />
        <el-table-column
          label="申请数量"
          align="center"
          prop="rwdSqsl"
          width="100"
        />
        <el-table-column
          label="允许数量"
          align="center"
          prop="rwdOksl"
          width="100"
        />
        <el-table-column
          label="拒收数量"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwdNgsl"
        />
        <el-table-column label="入库数量" align="center" prop="rwdRksl" />
        <el-table-column label="单价" align="center" prop="rwdMoney" />
        <el-table-column label="存放位置" align="center" prop="rwdCwdm">
          <template #default="scope">
            <dict-tag :options="allStorageOptions" :value="scope.row.rwdCwdm" />
          </template>
        </el-table-column>
        <el-table-column
          label="检验结果"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwdJyjg"
        >
          <template #default="scope">
            <dict-tag :options="jyjgDict" :value="scope.row.rwdJyjg" />
          </template>
        </el-table-column>
        <el-table-column
          label="检验描述"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwdJydesc"
        />
        <el-table-column
          label="收货单号"
          :show-overflow-tooltip="true"
          align="center"
          prop="rwmShdh"
          width="180"
        />
        <el-table-column
          label="备注"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwmDesc"
        />
        <el-table-column
          label="开单人员"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwmJlry"
        />
        <el-table-column
          label="开单日期"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
          prop="rwmJlrq"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.rwmJlrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="检验人员"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwmJyry"
        />
        <el-table-column
          label="检验日期"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
          prop="rwmJyrq"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.rwmJyrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="入库人员"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwdRkry"
        />
        <el-table-column
          label="入库日期"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
          prop="rwdRkrq"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.rwdRkrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="过账人员"
          :show-overflow-tooltip="true"
          width="100"
          align="center"
          prop="rwmGzry"
        />
        <el-table-column
          label="过账日期"
          :show-overflow-tooltip="true"
          width="150"
          align="center"
          prop="rwmGzrq"
        >
          <template #default="scope">
            <span>{{
              parseTime(scope.row.rwmGzrq, "{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  exportRejectRate,
  getRejectRate,
  getRejectRateDetail,
} from "@/api/putStorage/rwmReport";
import { getPstorageType } from "@/api/repertory/putstorage";
import { getCs } from "@/api/putStorage/putStorageAdd";
import { getAll } from "@/api/repertory/Storage";

export default {
  name: "LqmReport",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      openDetail: false,
      RwmReport: {},
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 总条数
      total: 0,
      total1: 0,
      // 表格数据
      rejectRateList: [],
      rwdDetList: [],

      jyjgDict: [
        { dictLabel: "允收", dictValue: "OK", listClass: "default" },
        { dictLabel: "拒收", dictValue: "NG", listClass: "default" },
        { dictLabel: "特采", dictValue: "TC", listClass: "default" },
      ],

      // 弹出层标题
      title: "",
      // 建立日期时间范围
      dateRange: this.$moment(),
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        rwmCsdm: null,
      },
      queryParamsChildren: {
        pageNum: 1,
        pageSize: 30,
        rwmType: null,
        rwmCsCode: null,
        rwdJlrq: null,
      },
      csOptions: [],
      psTypeOptions: [],
      unitFlagOptions: [],
      allStorageOptions: [],
    };
  },
  created() {
    getAll().then((response) => {
      this.allStorageOptions = response.data;

      for (let item of this.allStorageOptions) {
        item.dictLabel = item.storageName;
        item.listClass = "default";
        item.dictValue = item.storageId + "";
      }
    });
    //单位
    this.getDicts("sys_unit").then((response) => {
      this.unitFlagOptions = response.data;
    });

    getCs().then((response) => {
      this.csOptions = response.data;
      for (let item of this.csOptions) {
        item.dictLabel = item.csmCs;
        item.listClass = "default";
        item.dictValue = item.csmCsdm;
      }
    });

    //入库类型字典
    getPstorageType(0).then((response) => {
      this.psTypeOptions = response.data;
      for (let i of this.psTypeOptions) {
        i.listClass = "default";
      }
    });
    this.getList();
  },
  methods: {
    /** 查询来料入库批退率列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.dateRange && "" != this.dateRange) {
        this.queryParams.params["beginRwmJlrq"] = this.moment(
          this.dateRange
        ).format("YYYY-MM");
      }

      this.queryParams.pageNum = 1;
      this.rejectRateList = [];
      getRejectRate(this.queryParams).then((response) => {
        this.rejectRateList = response.data.detail.rows;
        this.total = response.data.detail.total;
        this.loading = false;
      });
    },
    //load
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.total / this.queryParams.pageSize)
      ) {
        this.queryParams.pageNum++;
        getRejectRate(this.queryParams).then((response) => {
          this.rejectRateList = this.rejectRateList.concat(
            response.data.detail.rows
          );
          this.total = response.data.detail.total;
          this.loading = false;
        });
      }
      return 0;
    },
    load1() {
      if (
        this.queryParamsChildren.pageNum <
        Math.ceil(this.total1 / this.queryParamsChildren.pageSize)
      ) {
        this.queryParamsChildren.pageNum++;
        getRejectRateDetail(this.queryParamsChildren).then((response) => {
          this.rwdDetList = this.rwdDetList.concat(response.rows);
          this.total1 = response.total;
          this.loading = false;
        });
      }
      return 0;
    },
    // 取消按钮
    cancel() {
      this.openSearch = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.rejectRateList = [];
      this.getList();
      this.openSearch = false;
    },
    handleSearch() {
      this.title = "查询来料入库批退率";
      this.openSearch = true;
    },
    /** 点击查看详细信息 */
    handleDetailClick(row, type) {
      if (
        (row.rwdNGNum > 0 && type === "NG") ||
        (row.rwdTotalNum > 0 && type === "OK")
      ) {
        this.queryParamsChildren.pageNum = 1;
        this.queryParamsChildren.params = {};
        this.queryParamsChildren.rwmType = type;
        this.queryParamsChildren.rwmCsCode = row.rwmCsCode;
        this.queryParamsChildren.params["rwmCsdm"] = this.queryParams.rwmCsdm;
        this.queryParamsChildren.rwdJlrq = row.rwdJlrq;
        this.queryParamsChildren.params["rwmJlrq"] =
          this.queryParams.params["beginRwmJlrq"];
        getRejectRateDetail(this.queryParamsChildren).then((response) => {
          this.rwdDetList = [];
          this.rwdDetList = response.rows;
          this.total1 = response.total;
          this.openDetail = true;
        });
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否导出所有来料入库批退率明细？", "确认导出", {
        cancelButtonText: "取消",
        confirmButtonText: "确认",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return exportRejectRate(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped></style>
